<template>
  <el-dialog
    v-model="show"
    title="选择连线关系"
    width="500"
    destroy-on-close
    align-center
    draggable
    :before-close="handleDialogClose"
  >
    <el-form label-width="auto" :inline="true" :model="connect">
      <el-descriptions
        class="margin-top"
        :title="connect.source.tbName + '（' + connect.source.tbLabel + '）'"
        :column="3"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <key />
              </el-icon>
              关联字段
            </div>
          </template>
          {{ connect.source.itemName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <connection />
              </el-icon>
              关系
            </div>
          </template>
          <el-switch
            v-model="connect.source.relation"
            style="
              --el-switch-on-color: #0066cc;
              --el-switch-off-color: #009933;
            "
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="多"
            inactive-text="单"
          />
        </el-descriptions-item>
      </el-descriptions>
      <el-descriptions
        class="margin-top"
        :title="connect.target.tbName + '（' + connect.target.tbLabel + '）'"
        :column="3"
        :size="size"
        border
      >
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <key />
              </el-icon>
              关联字段
            </div>
          </template>
          {{ connect.target.itemName }}
        </el-descriptions-item>
        <el-descriptions-item>
          <template #label>
            <div class="cell-item">
              <el-icon :style="iconStyle">
                <connection />
              </el-icon>
              关系
            </div>
          </template>
          <el-switch
            v-model="connect.target.relation"
            style="
              --el-switch-on-color: #0066cc;
              --el-switch-off-color: #009933;
            "
            inline-prompt
            :active-value="1"
            :inactive-value="0"
            active-text="多"
            inactive-text="单"
          />
        </el-descriptions-item>
      </el-descriptions>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-row justify="space-between">
          <el-col :span="2">
            <el-button
              v-if="showDelete"
              type="danger"
              :icon="Delete"
              circle
              @click="commitDelete"
            />
          </el-col>
          <el-col :span="16">
            <el-button @click="cancel">取消</el-button>
            <el-button type="primary" @click="commit">确认</el-button>
          </el-col>
        </el-row>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import { ref, computed, watch, PropType, toRef } from "vue";
import { Delete } from "@element-plus/icons-vue";
import { ElMessageBox } from "element-plus";
import type { ComponentSize } from "element-plus";

type Connect = {
  source: {
    tbName: string;
    tbLabel: string;
    itemName: string;
    relation: number;
  };
  target: {
    tbName: string;
    tbLabel: string;
    itemName: string;
    relation: number;
  };
};

const props = defineProps({
    show: {
      type: Boolean,
      default: false,
    },
    connect: {
      type: Object as PropType<Connect>,
      default: () => ({}),
    },
    showDelete: {
      type: Boolean,
      defalue: false,
    },
  }),
  emit = defineEmits([
    "update:show",
    "update:connect",
    "delete",
    "cancel",
    "commit",
  ]),
  size = ref<ComponentSize>("default"),
  iconStyle = computed(() => {
    const marginMap = {
      large: "8px",
      default: "6px",
      small: "4px",
    };
    if (size.value)
      return {
        marginRight: marginMap[size.value],
      };
    else
      return {
        marginRight: marginMap.default,
      };
  }),
  show = toRef(props.show),
  connect = toRef(props.connect),
  showDelete = toRef(props.showDelete),
  commitDelete = () => {
    ElMessageBox.confirm("你确定删除关系连接线么?")
      .then(() => {
        emit("delete");
        cancel();
      })
      .catch(() => {
        // catch error
      });
  },
  cancel = () => {
    emit("cancel");
    show.value = false;
    emit("update:show", show.value);
  },
  commit = () => {
    show.value = false;
    emit("update:show", show.value);
    emit("update:connect", connect.value);
    emit("commit");
  },
  handleDialogClose = () => {
    ElMessageBox.confirm("你确定关闭对话框么?")
      .then(() => {
        cancel();
      })
      .catch(() => {
        // catch error
      });
  };

watch(
  () => props.show,
  (newVal, oldVal) => {
    show.value = newVal;
    if (newVal === true) {
      connect.value = toRef(props.connect).value;
      showDelete.value = toRef(props.showDelete).value;
    }
  }
);
</script>
